<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高德地图测试</title>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15"></script>
<!--    <script type="text/javascript" src="../jquery/jquery-3.0.0.js"></script>-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        #container {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div>
    <p>起始坐标信息</p>
    经度:<input id="startLng" type="text" value="110.196150"><br/>
    纬度:<input id="startLat" type="text" value="21.678881"><br/>
    <p>终点坐标信息</p>
    经度:<input id="endLng" type="text" value="110.195455"><br/>
    纬度:<input id="endLat" type="text" value="21.674458"><br/>
    <button onclick="cal()">计算距离(单位：米)</button>
    <input id="result" type="text">
</div>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        zoom: 11,
        center: [110.200908, 21.68202]
    });

    function cal() {
        var startLng = parseFloat($("#startLng").val());
        var startLat = parseFloat($("#startLat").val());

        var endLng = parseFloat($("#endLng").val());
        var endLat = parseFloat($("#endLat").val());

        var p1 = [startLng, startLat];
        var p2 = [endLng, endLat];
        // 返回 p1 到 p2 间的地面距离，单位：米
        var dis = AMap.GeometryUtil.distance(p1, p2);
        $("#result").val(dis);
    }
</script>
</body>
</html>